<script>
    export default ({
      name: "myCartoon",
      data() {
        return {
          isShow: true
        }
      },
      methods:{
        toggleShow(){
          this.isShow = !this.isShow
        }
      }
    })

</script>

<template>
    <div>
      <button @click="toggleShow">显示/影藏</button>
      <transition>
        <h1 v-show = "isShow">我是动画实现</h1>
      </transition>
    </div>
</template>

<style scoped>
h1{
  background-color: #66afe9;
}
@keyframes move{
  from{
      transform: translateX(-100%);
  }
  to{
    transform: translateX(0px);
  }
}
.v-enter-active{
  animation: move linear 1s;
}
.v-leave-active{
  animation:  move linear 1s reverse;
}

</style>